<template>
  <div class="top-item flex-row-center-between pd16 pointer">
    <div class="flex1">
      <div class="flex">
        <span class="mgr20">{{ props.data.dateString }}</span>
        <span>本月新增故障的客户数</span>
      </div>
      <div class="mgt20 flex-row-center-left">
        <span class="fs20 bold mgr10 fs28">{{ props.data.dateCount }}</span>
        <span class="mgr30 grey-text">个</span>
        <span class="mgr5 grey-text">占总客户数的</span>
        <span class="bold">{{ props.data.currentRate }}</span>
      </div>
    </div>

    <div class="flex1 flex-column-right-center">
      <div class="flex">
        <span class="grey-text">环比</span>
        <div v-if="props.data.momRatio?.startsWith('+')" class="up flex-row-center-left">
          <el-icon><CaretTop /></el-icon>
          <span class="bold">{{ props.data.momRatio }}</span>
        </div>
        <div v-else class="down flex-row-center-left">
          <el-icon><CaretBottom /></el-icon>
          <span class="bold">{{ props.data.momRatio }}</span>
        </div>
      </div>

      <div class="mgt30 flex">
        <span class="grey-text">同比</span>
        <div v-if="props.data.yoyBasis?.startsWith('+')" class="up flex-row-center-left">
          <el-icon><CaretTop /></el-icon>
          <span class="bold">{{ props.data.yoyBasis }}</span>
        </div>
        <div v-else class="down flex-row-center-left">
          <el-icon><CaretBottom /></el-icon>
          <span class="down bold">{{ props.data.yoyBasis }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import type { FaultOverview } from '../config'

  const props = defineProps({
    data: {
      type: Object as PropType<FaultOverview>,
      default: () => ({})
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */
</script>

<style scoped lang="less">
  .top-item {
    width: 600px;
    background: #f6f7fb;
    .up {
      color: #d92329;
    }
    .down {
      color: #119c59;
    }
  }
</style>
